<template>
  <el-skeleton animated>
    <el-table ref="table" :data="data" v-bind="tc">
      <el-table-column type="selection" />
      <el-table-column type="index" label="序号" align="center" />
      <slot></slot>
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="{ row, $index }">
          <el-button v-if="isEdit" :size="size" @click="emit('edit-row', row, $index)"
            >编辑</el-button
          >
          <el-popconfirm
            v-if="isDelete"
            :hide-after="50"
            title="确定要删除该行数据吗？"
            @confirm="emit('rmove-row', row, $index)"
          >
            <template #reference>
              <el-button type="danger" :size="size"> 删除 </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-skeleton>
</template>

<script setup>
defineProps({
  data: {
    type: Array,
    default: () => []
  },
  selection: {
    type: Array,
    default: () => []
  },
  isEdit: {
    type: Boolean,
    default: true
  },
  isDelete: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['edit-row', 'remove-row'])

const { size } = inject('app_size')

const table = ref()

const tc = {
  // 是否存在斑马条纹
  stripe: true,
  // 是否存在边框
  border: true,
  // 样式
  style: 'width: 100%'
}

defineExpose({
  table
})
</script>

<style lang="scss" scoped>
.el-table {
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: auto;
}
</style>
